<template>
    <div class="permission">
        <div class="site-content">
            <div class="content-warp">
                <div class="permission-site permission-info">
                    <section-title>权限管理</section-title>

                    <div class="applyList">
                        <Quote>
                            <div class="applyList-header">
                                <span class="applyList-username">名称</span>
                                <span>邮箱</span>
                                <span class="applyList-permission">权限</span>
                                <span>操作</span>
                            </div>
                            <div v-if="applyList.length === 0" style="text-align: center;color: #999">
                                暂无申请
                            </div>
                            <div class="applyList-item" v-for="item in applyList" :key="item.userId">
                                <span class="applyList-username">{{ item.username }}</span>
                                <span>{{ item.email }}</span>
                                <span class="applyList-permission">{{ getPermission(item.permission) }}</span>
                                <span><button @click="upApply(item.userId)">升级</button><button
                                        @click="delApply(item.userId)">删除</button></span>
                            </div>
                        </Quote>
                    </div>
                </div>
            </div>
            <div class="content-warp">
                <div class="permission-site permission-info">
                    <section-title>
                        <div class="permission-user">
                            <span>用户管理</span>
                            <div>
                                用户邮箱:
                                <input type="text" v-model="email"> 
                                <button @click="getUserInfo">查询</button>
                            </div>
                        </div>
                    </section-title>

                    <div class="userList">
                        <Quote>
                            <div class="applyList-header">
                                <span class="applyList-username">名称</span>
                                <span>邮箱</span>
                                <span class="applyList-permission">权限</span>
                                <span>操作</span>
                            </div>
                            <div v-if="userInfo.id === undefined" style="text-align: center;color: #999">
                                请查询
                            </div>
                            <div class="applyList-item" v-if="userInfo.id !== undefined">
                                <span class="applyList-username">{{ userInfo.username }}</span>
                                <span>{{ userInfo.email }}</span>
                                <span class="applyList-permission">{{ getPermission(userInfo.permission) }}</span>
                                <span><button @click="resetPassword">重置</button><button @click="blackUser">拉黑</button></span>
                            </div>
                        </Quote>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import sectionTitle from '@/components/section-title'
import Quote from "@/components/quote";
import { fetchApplyList, fetchDelApply, fetchUpdateApply,fetchUserInfo,fetchResetPassword,fetchBlackUser } from '../api'
import permission from '@/const/permission';
export default {
    name: "permission",
    data() {
        return {
            applyList: [],
            email: '',
            userInfo: {}
        }
    },
    components: {
        Quote,
        sectionTitle
    },
    methods: {
        getApplyList() {
            fetchApplyList().then(res => {
                this.applyList = res
            })
        },
        delApply(id) {
            fetchDelApply(id).then(res => {
                this.$message.success('删除成功')
                this.getApplyList()
            })
        },
        async upApply(id) {
            await fetchUpdateApply(id)
            this.$message.success('升级成功')
            await fetchDelApply(id)
            this.getApplyList()
        },
        getPermission(type) {
            return permission[type]
        },
        getUserInfo(){
            fetchUserInfo(this.email).then(res=>{
                this.userInfo = res
                this.email = ''
            }).catch(err=>{
                this.userInfo = {}
                this.$message.error('用户不存在')
                this.email = ''
            })
        },
        resetPassword(){
            fetchResetPassword(this.userInfo.id).then(res=>{
                this.$message.success('重置成功')
            })
        },
        blackUser(){
            fetchBlackUser(this.userInfo.id).then(res=>{
                this.$message.success('拉黑成功')
            })
        }
    },
    mounted() {
        this.getApplyList()
    },
    created() {
        if (this.$store.state.userInfo.permission !== 0) {
            this.$message.error('您没有权限访问该页面')
            this.$router.push('/')
        }
    }
}
</script>
<style scoped lang="less">
.permission {
    padding-top: 40px;
}

.content-warp {
    margin-top: 80px;
}

.applyList-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    span {
        width: 25%;
        text-align: center;
    }
}

.applyList-item {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;

    span {
        width: 25%;
        text-align: center;
    }

    button {
        width: 50px;
        height: 100%;
        border: none;
        background: #a0dad0;
        color: #fff;
        font-size: 16px;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 8px;

        &:hover {
            background: #fe7e7e;
        }
    }
}

.permission-user{
    display: flex;
    justify-content: space-between;

    span{
        width: 25%;
    }

    div{
        display: flex;
        justify-content: end;
        width: 100%;
        line-height: 30px;

        input{
            width: 200px;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 0 10px;
            margin: 0 10px;
        }

        button{
            width: 50px;
            height: 100%;
            border: none;
            background: #a0dad0;
            color: #fff;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 8px;

            &:hover{
                background: #fe7e7e;
            }
        }
    }
}

/*******/
@media (max-width: 800px) {
    .content-warp {
        margin-top: 0;
    }

    .applyList-permission {
        display: none;
    }
    .permission-user{
        margin-top: 50px;
        flex-wrap: wrap;
        div{
            justify-content: start;
            input{
                width:auto
            }
        }
    }
}

@media (max-width: 600px) {
    .applyList-username {
        display: none;
    }

    .applyList-item {
        span {
            width: auto;
        }

        button {
            width: 40px;
        }
    }
}
</style>
